﻿<phone:PhoneApplicationPage 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:WindowsPhone7UXGuide"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WindowsPhone7UXGuide.check_boxes"
	SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ButtonBase">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
			<Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Padding" Value="0"/>
		</Style>
		<Style x:Key="MultiLineCheckBoxStyle" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="CheckBox">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxPressedBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ColorAnimation Duration="0" To="{StaticResource PhoneDisabledColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="CheckStates">
									<VisualState x:Name="Checked">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="-6" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="CheckMark" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unchecked"/>
									<VisualState x:Name="Indeterminate">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="CheckMark" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="-6.001" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="IndeterminateMark" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="InvalidFocused"/>
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="InvalidUnfocused"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Unfocused"/>
									<VisualState x:Name="Focused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="32"/>
									<ColumnDefinition/>
								</Grid.ColumnDefinitions>
								<Border x:Name="CheckBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="{StaticResource PhoneBorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="32" IsHitTestVisible="False" VerticalAlignment="Top" Width="32"/>
								<Rectangle x:Name="IndeterminateMark" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="16" IsHitTestVisible="False" Grid.Row="0" Visibility="Collapsed" VerticalAlignment="Center" Width="16" RenderTransformOrigin="0.5,0.5">
									<Rectangle.RenderTransform>
										<CompositeTransform/>
									</Rectangle.RenderTransform>
								</Rectangle>
								<Path x:Name="CheckMark" Data="M0,119 L31,92 L119,185 L267,0 L300,24 L122,250 z" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="18" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="24" RenderTransformOrigin="0.5,0.5">
									<Path.RenderTransform>
										<CompositeTransform/>
									</Path.RenderTransform>
								</Path>
								<TextBlock x:Name="ContentContainer" Text="{TemplateBinding Content}" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,6,0,-9" Padding="{TemplateBinding Padding}" LineStackingStrategy="BlockLineHeight" LineHeight="23" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeMedium}" VerticalAlignment="Top">
									<TextBlock.Foreground>
										<SolidColorBrush Color="{StaticResource PhoneForegroundColor}"/>
									</TextBlock.Foreground>
								</TextBlock>
							</Grid>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Custom:Interaction.Triggers>
			<Custom:EventTrigger EventName="Loaded">
				<local:SetPivotIndexAction TargetName="pivot"/>
			</Custom:EventTrigger>
		</Custom:Interaction.Triggers>
		<!--Pivot Control-->
		<controls:Pivot x:Name="pivot" Title="CHECK BOXES">
			<controls:PivotItem x:Name="check_boxes_single_column" Header="one column">
				<Grid>
					<ScrollViewer>
						<StackPanel Margin="0,22,0,0">
							<StackPanel Margin="0,0,0,36">
								<TextBlock Margin="{StaticResource PhoneHorizontalMargin}" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" Text="Check box group label" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"/>
								<StackPanel Orientation="Vertical" Grid.Row="2">
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Height="72" HorizontalAlignment="Left"/>
									<CheckBox Content="This is an example of a longer two-line check box label with wrapping" Foreground="{StaticResource PhoneForegroundBrush}" Style="{StaticResource MultiLineCheckBoxStyle}"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Height="72" HorizontalAlignment="Left"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
								</StackPanel>
							</StackPanel>
							<StackPanel Margin="0,0,0,36">
								<TextBlock Margin="{StaticResource PhoneHorizontalMargin}" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" Text="Check box group label" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"/>
								<StackPanel Orientation="Vertical" Grid.Row="2">
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Height="72" HorizontalAlignment="Left"/>
									<CheckBox Content="This is an example of a longer two-line check box label with wrapping" Foreground="{StaticResource PhoneForegroundBrush}" Style="{StaticResource MultiLineCheckBoxStyle}"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Height="72" HorizontalAlignment="Left"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
								</StackPanel>
							</StackPanel>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>
		<!--Pivot item two-->
			<controls:PivotItem x:Name="check_boxes_fixed_double_column" Header="two column">
				<Grid>
					<ScrollViewer>
						<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,22,0,0">
							<TextBlock Margin="{StaticResource PhoneHorizontalMargin}" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" Text="Check box group label" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"/>
							<StackPanel Orientation="Vertical" Grid.Row="1">
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Margin="0,0,28,0"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Margin="0,0,28,0"/>
								</StackPanel>
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
								</StackPanel>
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
								</StackPanel>
								<StackPanel >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
								</StackPanel>
							</StackPanel>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>
			<controls:PivotItem x:Name="check_boxes_bottom" Header="bottom">
				<Grid>
					<ScrollViewer>
						<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,22,0,0">
							<TextBlock Margin="{StaticResource PhoneHorizontalMargin}" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" Text="Check box group label" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"/>
							<StackPanel Orientation="Vertical" Grid.Row="1">
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Margin="0,0,28,0"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Margin="0,0,28,0"/>
								</StackPanel>
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
								</StackPanel>
								<StackPanel Orientation="Horizontal" >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}" Width="200"/>
								</StackPanel>
								<StackPanel >
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
									<CheckBox Content="Check box" Foreground="{StaticResource PhoneForegroundBrush}"/>
								</StackPanel>
							</StackPanel>
							<CheckBox Content="Bottom aligned check box" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,86,0,0"/>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>
		</controls:Pivot>
	</Grid>
</phone:PhoneApplicationPage>